<template>
  <div class="bg-white border border-slate-200 rounded-lg p-4">
    <div class="flex items-center justify-between mb-4">
      <h3 class="font-semibold text-slate-800 flex items-center">
        <div :class="panel.iconBg" class="w-8 h-8 rounded-lg flex items-center justify-center mr-3">
          <i :class="panel.icon" class="text-white"></i>
        </div>
        {{ panel.title }}
      </h3>
      <div class="flex items-center space-x-2">
        <span :class="panel.stepBadge" class="px-2 py-1 text-xs rounded-full">
          {{ panel.step }}
        </span>
        <span class="text-xs text-slate-500">{{ formatTime(panel.timestamp) }}</span>
      </div>
    </div>
    
    <div class="prose prose-sm max-w-none">
      <div v-html="panel.content"></div>
    </div>
    
    <!-- 处理时间信息 -->
    <div v-if="panel.extraInfo" class="flex items-center justify-between p-3 bg-slate-50 rounded-lg mt-4">
      <span class="text-sm text-slate-600">处理完成时间</span>
      <span class="text-sm font-medium text-slate-800">{{ formatTime(panel.timestamp) }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ResultPanel } from '../../types/home'
import { formatTime } from '../../utils/home'

interface Props {
  panel: ResultPanel
  conversationType: string
}

defineProps<Props>()
</script>

<style scoped>
.prose {
  line-height: 1.6;
}

.prose ul {
  margin: 0;
  padding-left: 1.5rem;
}

.prose li {
  margin: 0.25rem 0;
}
</style>